<template>
    <div>
        <!-- <h2>当前最新的count值:{{count}}</h2> -->
        <h3>{{showNum}}</h3>
        <button @click="sub">-1</button>
        <button @click="sub2">-10</button>
        <button @click="sub3">-1 Async</button>
    </div>
</template>
<script>
//触发state mutations actions的第二种方法

//导入mapState 函数
import {mapState} from 'vuex'
//导入mutation 函数
import {mapMutations} from 'vuex'
//导入actions 函数
import {mapActions} from 'vuex'
//导入getters 函数
import {mapGetters} from 'vuex'
export default {
    data () {
        return {
            
        }
    },
    //将全局数据映射为当前组件的计算属性
    computed: {
        ...mapState(['count']),
        //getter将相当于计算属性
        ...mapGetters(['showNum'])
    },
    //将mutation中的函数映射为当前组件的methods方法
    methods: {
        ...mapMutations(['sub','subN']),
        ...mapActions(['subNasync']),
        sub2() {
            this.subN(10)
        },
        sub3() {
            this.subNasync()
        }
    }
}
</script>
<style lang="less" scoped>

</style>